<template>
  <div class="hot_new_goods" v-if="hotgoods">
    <div class="banner">
      <van-swipe :autoplay="3000" indicator-color="#e93323">
        <van-swipe-item v-for="(item, index) in hotgoods.banner" :key="index">
          <img v-lazy="item.img" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="listTitle">
      <span class="line"></span>
      <div class="text">
        <van-icon :name="title[$route.query.id-1].className" size="0.35rem" />
        <span>{{ title[$route.query.id-1].title }}</span>
      </div>
      <span class="line"></span>
    </div>
    <div class="productlist">
      <HotGoodsCard
        v-for="item in hotgoods.list"
        :key="item.id"
        :item="item"
      ></HotGoodsCard>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import HotGoodsCard from "@/components/HotGoodsCard";
export default {
  components: {
    HotGoodsCard,
  },
  data(){
    return {
      title:[
        {title:'精品推荐',className:'gem-o'},
        {title:'热门榜单',className:'fire-o'},
        {title:'首发新品',className:'new-o'},
        {title:'促销单品',className:'bill-o'}
        ]
    }
  },
  created() {
    this.getList({
      url: "/groom/list/" + this.$route.query.id,
      name: "hotgoods",
    });
    document.title = this.title[this.$route.query.id-1].title
  },
  methods: {
    ...mapActions(["getList"]),
  },
  computed: {
    ...mapState({
      hotgoods: (state) => state.data.list.hotgoods,
    }),
  },
};
</script>

<style lang="less">
.hot_new_goods {
  width: 100%;
  background-color: #f5f5f5;
  .banner {
    width: 100%;
    height: 141px;
    .van-swipe {
      height: 100%;
      .van-swipe-item {
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .van-swipe__indicators {
      left: auto;
      right: 10px;
    }
  }
  .listTitle {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .van-icon-gem-o,
    .van-icon-fire-o,
    .van-icon-new-o,
    .van-icon-bill-o{
      margin-right: 8px;
    }
    .line{
      width: 30%;
      height: 2px;
      background-color: #efefef;
    }
    .text{
      height: 30px;
      display: flex;
      align-items: center;
    }
  }
  .productlist {
    width: 100%;
    .HotGoodCard {
      width: 100%;
      .van-card {
        padding: 10px 10px;
        .van-card__content {
          border-bottom: 1px solid #eee;
        }
      }
    }
  }
}
</style>